<script lang="ts" setup>
import { reactive } from "vue";

import { getAllQueueListAPI, getDeptQueueListAPI } from "@/api/queue/index";
import { IDeptQueueVo } from "@/api/queue/types";

import DeptQueueDetail from "./components/deptQueueDetail.vue";
const getDeptQueueList = async () => {
  const res = await getAllQueueListAPI();
  deptQueueList.value = res.data;
};

const deptQueueList = ref<IDeptQueueVo[]>([]);

const dialogVisible = reactive<DialogOption>({
  visible: false,
  title: "科室排队详情",
});

const currentDept = ref<IDeptQueueVo>();

const openDialog = (item?: IDeptQueueVo) => {
  currentDept.value = item;
  dialogVisible.visible = true;
};

onMounted(() => {
  getDeptQueueList();
});
</script>

<template>
  <div class="app-container">
    <el-card>
      <div class="title">科室排队详情</div>
      <div class="dept-queque-box">
        <el-card
          style="width: 100%"
          class="dept-item"
          v-for="item in deptQueueList"
          :key="item.deptId"
          @click="openDialog(item)"
        >
          <template #header>
            <div class="card-header">
              <span>{{ item.deptName }}</span>
            </div>
          </template>
          <div>
            <el-row>
              <el-col :span="12"> 在排队人数：</el-col>
              <el-col :span="12"> {{ item.num }} </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
    </el-card>

    <el-dialog
      style="width: 60%; min-height: 30vh"
      v-model="dialogVisible.visible"
    >
      <DeptQueueDetail
        v-if="dialogVisible.visible"
        :deptId="currentDept?.deptId"
      />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  .title {
    text-align: center;
    font-size: 20px;
  }

  .dept-queque-box {
    display: flex;
    flex-wrap: wrap;
    .dept-item {
      flex: 1;
      margin: 5px;
      min-width: 260px;
    }

    .dept-item:hover {
      transform: scale(1.01);
    }
  }
}
</style>
